<template>
<div>
  <table :class="$options._componentTag">
  <thead>
  <tr>
    <th v-for="col in model.head" @click="sort(col.prop)" :class="{
      ascending: prop === col.prop && !reverse,descending: prop === col.prop && reverse
    }">{{ col.label }}
<!--    <th v-for="col in model.head" @click="sort(col)" :class="{-->
<!--      ascending: prop === col.prop && !reverse,descending: prop === col.prop && reverse-->
<!--    }">{{ col.label }}-->
    </th>
    <th>
      动作
    </th>
  </tr>
  </thead>
  <tbody>
  <tr v-for="row in model.body">
<!--    <td v-for="col in model.head" >{{row[col.prop]}}</td>-->
    <td v-for="(col, i) in model.head" >
      <img v-if="model.head[i].type === 'image'" :src= "'http://localhost:5000/static/'+row[col.prop]" :alt="row[col.prop]" width="50%">

      <p v-if="model.head[i].type !== 'image'">{{row[col.prop]}}</p>
    </td>
    <td>
      <button>
        <a :href="'/train/'+row['train_id']">查看</a>
      </button>
      
      <hr/>
      <button @click="delete_by_train_id(row['train_id'])">删除</button>
    </td>
    
  </tr>
  </tbody>
  </table>
</div>

</template>

<script>
import axios from "axios";

export default {
  name: "SortableTable",
  props: ['model'],
  model: { prop: 'model' },
  data: function data() {
        return {
            prop: null, // last property used by sort
            reverse: false // reversed sort order
        };
    },
    mounted: function mounted() {
        //  default sort by first table header (ascending)
        // this.sort(this.model.head[0]);
        this.sort(this.model.head[0].prop);
    },
    methods: {
        sort: function sort(prop) {
            this.model.body.sort(function (a, b) {
              if (a[prop] == null){
                a[prop] = Number.MIN_VALUE
              }
              if (b[prop] == null){
                b[prop] = Number.MIN_VALUE
              }
              if (typeof a[prop] === 'number') {
                    return a[prop] - b[prop];
                }
              a = a[prop].toLowerCase();
              b = b[prop].toLowerCase();
              return a < b ? -1 : a > b ? 1 : 0;
            });

            //  flip decscending order if same sort prop or set to false
            //  if descending reverse the data array
            //  store sort prop
            this.reverse = this.prop === prop ? !this.reverse : false;
            if (this.reverse) this.model.body.reverse();
            this.prop = prop;

            //  Doeas not work in safari
            //  scrollTo(0,0);
            //  html { scroll-behavior: smooth; }
            //  scroll({ top: 0, left: 0, behavior: 'smooth' });
        },
      delete_by_train_id: function (train_id) {
        console.log("click delete")
        console.log(train_id)
        const path = 'http://localhost:5000/';
        axios.get(path+"clean/"+train_id)
        .then((res) => {
          this.$parent.getTrainList()
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
      },

  },
  created() {
  }
}
</script>

<style scoped>
@import "../../public/style.css";
</style>